{literal}
<script type="text/javascript">

	var current_id = '';
	function loadPage(sourceDiv, pageName, patientId) {
		if (pageName == current_id) {
			return;
		}
		
		$.ajax ({
			type: 	  "GET",
			url:	  pageName + "?set_ajax_view",
			data:     "patientId=" + patientId, 
			dataType: "html",
			beforeSend: function() {
				$('div#pageContent').hide("slow");				
			},			
			success:  function(data) {				
				$("#" + sourceDiv).html(data);				
				$("#" + sourceDiv).show('fast');			
			}
		});
		current_id = pageName;
	}
	$(document).ready(function() {
		activeMenu('2', '4');	

		// register click event
		$('a#loadDemographics').click(function(){
			$('.nav_bg a').removeClass('active');
			$(this).addClass('active');
		});
		$('a#loadCheckInDept').click(function(){
			$('.nav_bg a').removeClass('active');
			$(this).addClass('active');
		});
		$('a#loadInputForm').click(function(){
			$('.nav_bg a').removeClass('active');
			$(this).addClass('active');
		});
				

		{/literal}
		var selected = {$selected};
		var patientId = {$patientId};
		{literal}
			
		if ( selected == 0) {
			$('a#loadDemographics').addClass('active');
			loadPage('pageContent', '../Patient/loadDemographicsPage', patientId);	
		} else if (selected == 1) {
			$('a#loadCheckInDept').addClass('active');
			// TODO
		} else if (selected == 2) {
			$('a#loadInputForm').addClass('active');
			loadPage('pageContent', '../ResidentPatient/DisplayInputForm', patientId);
		}
	});
	
</script>
{/literal}

<div class='nav_left'>
	<div class='nav_right'>
		<div class='nav_bg' id="chromemenuMedHis">
			<a id='loadDemographics' href="javascript:loadPage('pageContent', '../Patient/loadDemographicsPage', {$patientId})">{translate}Demographic information{/translate}</a>
			<a id='loadCheckInDept' href="javascript:loadPage('pageContent', '../EmerReception/loadEmerInfo', {$patientId})">{translate}Check-in department{/translate}</a>
			<a id='loadInputForm' href="javascript:loadPage('pageContent', '../ResidentPatient/DisplayInputForm', {$patientId})">{translate}Medicine / Service{/translate}</a>						
		</div>
	</div>
</div>

<div class='separator'></div>
<div class='patientInfo' align="center">
	<span>
		{translate}Patient{/translate}: <span class='greenInfo' id="patientName">{$patientName}</span> -  
		<span class='greenInfo' id="patientDob">{translate p1=$patientDob p2=$patientAge}%s (Age %s){/translate}</span> - 
		{translate}ID{/translate}: <span class='greenInfo'>{$patientCode}</span> - 
		{translate}Latest examination{/translate}: <span class='greenInfo' id="lastExam">{$lastExam}</span>
	</span>
</div>
<div class='separator'></div>
<div id="barLoading" style="display:none; width: 590px;" align="center">
	<img src="{$base_uri}/images/ajax-loader.gif"/>
</div>
<div id='pageContent' style='display: block;'>
</div>